<script setup lang="ts">
import { onMounted } from 'vue';
import { eventCenter, getCurrentInstance, navigateTo, reLaunch, showLoading } from '@tarojs/taro';
import { getSysImgUrl } from '/@/utils/index';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { SPACE_COUNT_LIST_QUERY } from '/@/api/modules/parking/park-dashboard';
import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
import { state, countState } from './state';
import IMAGE_ICON_PARK_LOCATION from '/@/assets/image/icon/park-location.png';
import IMAGE_ICON_PARK_CAR from '/@/assets/image/icon/park-car.png';
import COMMON_DEFAULT from '/@/assets/image/icon/common-default.png';
import { formatMinutes } from '/@/utils/time';
import { PARK_CAR_LIST_QUERY } from '/@/api/modules/parking/park-car';
/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList(page: number = 1, pageSize: number = 15) {
  if (!page && state.finished) return;
  state.loading = true;

  PARK_CAR_LIST_QUERY({
    comQuery: { page, pageSize },
    createById: state.uaaUserId,
  })
    .then((res) => {
      state.loading = false;

      if (
        state.activePage >=
        (res.comQuery?.pageCount ||
          (res.comQuery?.totalCount as number) / (res.comQuery?.pageSize as number) ||
          1)
      )
        state.finished = true;
      if (!res.content || !res.content.length) return;

      res.content.forEach((item) => state.list.push(item));

      state.activePage += 1;
    })
    .catch(() => {
      state.loading = false;
    });
}

/**
 * @function 加载
 */
function onLoading() {
  if (state.finished) return;

  queryList(state.activePage);
}

/**
 * 查询停车场-总停车位和剩余停车位
 */
function querySpaceCountList() {
  SPACE_COUNT_LIST_QUERY({}).then((res) => {
    countState.spaceCountDto = res.spaceCountDto || [];
  });
}

/**
 * 查询车辆申请列表
 */
function queryCarApplyList() {
  state.activePage = 1;
  state.loading = true;
  state.finished = false;
  state.list = [];
  onLoading();
}

onMounted(() => {
  showLoading();
  //页面显示的时候执行
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    queryMyCarApplyList();
  });
  //查询停车位
  querySpaceCountList();
});
/**
 * 查询我申请通过的车辆列表
 */
function queryMyCarApplyList() {
  LOGIN_APP().then((res) => {
    state.uaaUserId = res.sysUserDto.uaaUserId || '';
    queryCarApplyList();
  });
}
</script>

<template>
  <view class="park-list app-page--1">
    <app-navbar title="停车服务" />
    <nut-tabs
      model-value="record"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'push') {
            reLaunch({ url: '/pages/approve/record/index?from=park' });
          }
        }
      "
    >
      <nut-tab-pane title="我的车辆" pane-key="record" />
      <nut-tab-pane title="申请记录" pane-key="push" />
    </nut-tabs>
    <scroll-view
      class="app-page__wrapper"
      :scroll-y="true"
      :lower-threshold="100"
      @scrolltolower="onLoading()"
    >
      <view class="park-list__wrapper">
        <view class="park-list__header">
          <view class="park-list__info">
            <view class="park-list__info__address">
              <text>{{ countState.spaceCountDto[0]?.parkName || '_' }}</text>
            </view>
            <view class="park-list__info__location">
              <image class="park-list__info__location__image" :src="IMAGE_ICON_PARK_LOCATION" />
            </view>
          </view>
          <view class="park-list__content">
            <view class="park-list__content--car">
              <image class="park-list__content--car__image" :src="IMAGE_ICON_PARK_CAR" />
            </view>
            <view class="park-list__content--left">
              <view class="park-list__content__title"><text>总车位</text></view>
              <view class="park-list__content__sub-title"
                ><text>{{ countState.spaceCountDto[0]?.totalPlace || '_' }}</text></view
              >
            </view>
            <view class="park-list__content--right">
              <view class="park-list__content__title"><text>剩余车位</text></view>
              <view class="park-list__content__sub-title"
                ><text>{{ countState.spaceCountDto[0]?.leftPlace || '_' }}</text></view
              >
            </view>
          </view>
        </view>
        <view
          class="park-item"
          v-for="item in state.list"
          @click="
            navigateTo({
              url: `/pages/park/record/index?plateNo=${item.plateNo}`,
            })
          "
        >
          <view class="park-item__image-wrapper">
            <image
              :src="item.carPicUrl ? getSysImgUrl(item.carPicUrl) : COMMON_DEFAULT"
              class="park-item__image"
              mode="aspectFill"
            />
          </view>
          <view class="park-item__center">
            <view class="park-item__header">
              <text class="park-item__title">{{ item.plateNo }}</text>
            </view>
            <view>
              <text>{{ item.createByName }}</text>
            </view>
            <view>
              <text>停车时长:&nbsp;&nbsp;</text>
              <text>{{ item.parkTime ? formatMinutes(item.parkTime) : '--' }}</text>
            </view>
          </view>
          <view>
            <app-nut-icon-right />
          </view>
        </view>
      </view>

      <view class="app-page__list-tips">
        <text v-if="!state.list.length">暂无数据！</text>
        <text v-else-if="state.list.length && state.loading">加载中...</text>
        <text v-else-if="state.list.length && state.finished">加载完成!</text>
      </view>
    </scroll-view>
    <view class="park-list__footer">
      <nut-button
        block
        type="info"
        @click="
          navigateTo({
            url: '/pages/park/add/index',
          })
        "
      >
        添加车辆
      </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
